<template>
  <div>
    展示在线用户<br>
    <ul>
        <li v-for="i in userlist">
            <el-button @click="choseid(i.id)">{{i.name}}</el-button>
        </li>
    </ul>
    <el-input v-model='sendsms'></el-input>
  <el-button @click='send'>submit</el-button>
  聊天内容展示：
  <ul>
    <li v-for="i in melist">{{i}}</li>
  </ul>
  </div>
  
</template>

<script>
export default {
  data(){
    return{
       msg:'',
       ws:'',
       name:'客服'+localStorage.getItem('name'),
       id:'',
       sendsms:'',
       melist:[],
       userlist:[],
       choseuserid:''
    }
  },
  methods:{
    initwebsocket(){
            this.id = this.$route.query.id,
            this.name = '客服'+this.id
            // payurl?pay='+this.pay+'&userid='+localStorage.getItem('userid')+'&pwd='+this.pwd
            this.ws = new WebSocket("ws://localhost:8000/wk?id="+this.id+"&name="+this.name)
            this.ws.onopen = function(){
                alert('success')
            }
            this.ws.onmessage=(msg)=>{
                var mes= JSON.parse(msg.data)
                this.melist.push(mes['mes'])
                this.userlist=mes['userlist']

            }
            this.ws.onclose=function(){
                alert('close')
            }
        },
        send(){
            if(this.choseuserid){
                var mes = this.name+'说'+this.sendsms
                this.melist.push(mes)
                var sendmes = JSON.stringify({'id':this.choseuserid,'mes':mes})
                this.ws.send(sendmes)

            }else{
                alert('必须选站聊天用户')
            }
        },
        choseid(id){
            this.choseuserid = id
        }
  },
  mounted(){
    this.initwebsocket()
  }

}
</script>

<style>

</style>